<template>
  <div class="app-container">
    <el-tabs v-model="queryParams.numType" type="card" @tab-click="getList">
      <el-tab-pane label="增加库存明细列表" name="1"></el-tab-pane>
      <el-tab-pane label="扣减库存明细列表" name="2"></el-tab-pane>
    </el-tabs>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="0px"
    >
      <!-- <el-form-item label=" 代理商用户ID" prop="productLevel">
        <el-input v-model="queryParams.goodName" placeholder="请输入代理商用户ID" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="代理商用户昵称" prop="goodName">
        <el-input v-model="queryParams.goodName" placeholder="请输入代理商用户昵称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <el-row>
        <el-col :span="2" :offset="0">
          <el-form-item label="" prop="relevantDocumentId">
            <el-input
              v-model="queryParams.relevantDocumentId"
              placeholder="请输入订单id"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="3" :offset="0">
          <el-form-item label="" prop="cloudInventoryId">
            <el-input
              v-model="queryParams.cloudInventoryId"
              placeholder="请输入订单编号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="3" :offset="0">
          <el-form-item label="" prop="userQuery">
            <el-input
              v-model="queryParams.userQuery"
              placeholder="请输入代理商昵称/id"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="3" :offset="0">
          <el-form-item label="" prop="goodName">
            <el-input
              v-model="queryParams.goodName"
              placeholder="请输入商品名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>
        <el-col :span="3" :offset="0">
          <el-form-item label="" prop="variationType">
            <el-select
              v-model="queryParams.variationType"
              placeholder="请选择库存扣减类型"
              clearable
              @keyup.enter.native="handleQuery"
            >
              <el-option
                v-for="item in typeList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="5" :offset="0"> -->
        <el-col :span="6" :offset="0">
          <el-form-item label="" prop="level">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="datePickerChange"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="4" :offset="0"> -->
        <el-col
          :span="4"
          :offset="0"
          style="display: flex; justify-content: flex-end"
        >
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!-- <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:good:export']"
          >导出</el-button
        > -->
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="goodList">
      <el-table-column label="代理商" prop="userId">
        <template slot-scope="{ row }">
          <div class="agents">
            <div class="agents-img">
              <image-preview
                :src="row.avatar"
                :width="50"
                :height="50"
              ></image-preview>
            </div>
            <div class="agents-info">
              <div>ID: {{ row.userId }}</div>
              <div>昵称：{{ row.nickName }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="商品id"
        align="center"
        prop="goodId"
        width="100"
      />
      <el-table-column label="商品信息" prop="nickName">
        <template slot-scope="{ row }">
          <div style="display: flex; align-items: center">
            <div style="margin-right: 10px">
              <image-preview
                :src="row.goodImg"
                :width="50"
                :height="50"
              ></image-preview>
            </div>
            <div>{{ row.goodName }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="`${queryParams.numType == 1 ? '增加' : '扣减'}库存数`"
        align="center"
        prop="phonenumber"
        width="100"
      >
        <template slot-scope="{ row }">
          {{ `${row.numType == 1 ? "+" : "-"}${row.num}` }}
        </template>
      </el-table-column>
      <el-table-column
        :label="`${queryParams.numType == 1 ? '增加' : '扣减'}库存类型`"
        align="center"
        prop="variationType"
        width="150"
      >
        <template slot-scope="{ row }">
          <el-tag size="mini" v-if="row.variationType">{{
            row.variationType
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="`补货${queryParams.numType == 1 ? '上级' : '下级'}`"
        prop="stockCount"
      >
        <template slot-scope="{ row }">
          <div
            class="agents"
            v-if="
              row.correlationAvatar ||
              row.correlationUserId ||
              row.correlationNickName
            "
          >
            <div class="agents-img">
              <image-preview
                :src="row.correlationAvatar"
                :width="50"
                :height="50"
              ></image-preview>
            </div>
            <div class="agents-info">
              <div>ID: {{ row.correlationUserId }}</div>
              <div>昵称：{{ row.correlationNickName }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="订单id"
        align="center"
        prop="relevantDocumentId"
      />
      <el-table-column label="时间" align="center" prop="createTime" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  cloudInventoryDetail,
  getInventoryDeductionType,
} from "@/api/inventory/details";
import { forrmatterEnmu } from "@/utils/index";
export default {
  name: "Good",
  dicts: ["member_agency_level"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 供应商商品表格数据
      goodList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        relevantDocumentId: null,
        cloudInventoryId: null,
        userQuery: null,
        goodName: null,
        variationType: null,
        startDate: null,
        endDate: null,
        numType: "1",
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        inventoryType: [
          { required: true, message: "商品数量增加不能为空", trigger: "blur" },
        ],
        goodInventory: [
          { required: true, message: "增加/减少库存不能为空", trigger: "blur" },
        ],
      },
      classifyList: [],
      stockDetailList: [],
      goodsDetailList: [],
      detailOpen: false,
      userId: null,
      dateRange: null,
      typeList: null,
    };
  },
  created() {
    this.getList();
    this.getType();
  },
  methods: {
    forrmatterEnmu,
    /** 查询供应商商品列表 */
    getList() {
      this.loading = true;
      cloudInventoryDetail(this.queryParams).then((response) => {
        this.goodList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /**查询库存扣减类型 */
    getType() {
      getInventoryDeductionType().then((res) => {
        this.typeList = res.data;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        userId: null,
        id: null,
        goodId: null,
        goodInventory: null,
        inventoryType: "1",
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = null;
      this.queryParams.startDate = null;
      this.queryParams.endDate = null;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/good/export",
        {
          ...this.queryParams,
        },
        `good_${new Date().getTime()}.xlsx`
      );
    },
    datePickerChange(v) {
      this.queryParams.startDate = this.$dayjs(v[0]).format("YYYY-MM-DD");
      this.queryParams.endDate = this.$dayjs(v[1]).format("YYYY-MM-DD");
    },
  },
};
</script>
<style lang="less" scoped>
.base-title {
  font-size: 18rpx;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  margin-bottom: 15px;

  &::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 15px;
    background: #1777ff;
    border-radius: 3px;
    margin-right: 8px;
  }
}

::v-deep .el-dialog__header {
  text-align: center;
}

.agents {
  display: flex;
  align-items: center;

  .agents-img {
    margin-right: 5px;
  }

  .agents-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
}
</style>
